<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 视窗——————响应式布局 -->
    <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0'>

    <!--当前页面的三要素-->
    <title>深圳市聚能优电科技有限公司</title>
    <meta name="description" content="关键词、关键字">
    <meta name="keywords" content="描述">

    <!-- 引入CSS文件 -->
    <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <link rel="stylesheet" type="text/css"  href="./js/player/theme/default/layer.css">
    <script type='text/javascript' src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    <style type="text/css">
        @font-face {
            font-family:'Helvetica';
            src: url('font/Helvetica.ttf');
        }
    </style>


</head>

<body>


<div id='container' class='container'>
    <div class="top">
        <img class="top_left" src="./images/logo.svg" alt="">
        <div class="top_right">智能低碳供电解决方案专家</div>
    </div>
    <div class="middle">
        <div class="mid_wap">
            <div class="tab_left tabs show">NDES</div>
            <div class="tab_right tabs">NESS</div>
        </div>
    </div>
    <div class="bottom">
        <div class="tabsmain ndes">
            <img src="./images/ndesdevice.svg"/>

            <!-- 基建临时用电(桩机、隧道等) -->
            <div class="bigimgicon" style="left: 71.5%;top: 9%;">
                <div class="bigimgicon_a" onclick="showlayer('jjlsyd')">
                    <span class="bigimgicon_dian jjlsyd_icon"></span>
                </div>
            </div>

            <!-- 应急保障(学校、重要活动) -->
            <div class="bigimgicon" style="left: 15.5%; top: 22%;">
                <div class="bigimgicon_a" onclick="showlayer('yjbz')">
                    <span class="bigimgicon_dian yjbz_icon"></span>
                </div>
            </div>


            <!-- 柴储一体化智能微网电站 -->
            <div class="bigimgicon" style="left: 62.5%;top: 44%;">
                <div class="bigimgicon_a" onclick="showlayer('ndes')">
                    <span class="bigimgicon_dian jjlsyd_icon"></span>
                </div>
            </div>

            <!-- 民生保障(山区、海岛离网供电) -->
            <div class="bigimgicon" style="left: 12.5%;top: 56%;">
                <div class="bigimgicon_a" onclick="showlayer('msbz')">
                    <span class="bigimgicon_dian jjlsyd_icon"></span>
                </div>
            </div>

            <!-- 移动应用(带车底移动电源车) -->
            <div class="bigimgicon" style="left: 75.8%;top: 74%;">
                <div class="bigimgicon_a" onclick="showlayer('ydyy')">
                    <span class="bigimgicon_dian jjlsyd_icon"></span>
                </div>
            </div>

            <!-- 采矿工业(油田、矿井等) -->
            <div class="bigimgicon" style="left: 34.5%;top: 87%;">
                <div class="bigimgicon_a" onclick="showlayer('ckgy')">
                    <span class="bigimgicon_dian jjlsyd_icon"></span>
                </div>
            </div>
        </div>

        <div class="tabsmain ness">
            <img src="./images/neesdevice.svg" style="width: 113%;margin-left: -38px;"/>

            <!-- 应急备用(银行、医院、学校等) -->
            <div class="bigimgicon" style="left: 73.5%;top: 8%;">
                <div class="bigimgicon_a" onclick="showlayer('yjby')">
                    <span class="bigimgicon_dian yjby_icon"></span>
                </div>
            </div>

            <!-- 充电站(光储充一体化) -->
            <div class="bigimgicon" style="left: 12.5%;top: 18%;">
                <div class="bigimgicon_a" onclick="showlayer('cdz')">
                    <span class="bigimgicon_dian cdz_icon"></span>
                </div>
            </div>

            <!-- 智能储能电站 NESS -->
            <div class="bigimgicon" style="left: 61.5%;top: 42%;">
                <div class="bigimgicon_a" onclick="showlayer('ness')">
                    <span class="bigimgicon_dian ness_icon"></span>
                </div>
            </div>

            <!-- 电网(储能调峰，用户侧响应) -->
            <div class="bigimgicon" style="left: 8.5%;top: 54%;">
                <div class="bigimgicon_a" onclick="showlayer('dy')">
                    <span class="bigimgicon_dian dy_icon"></span>
                </div>
            </div>

            <!-- 新能源(离网、并网调节) -->
            <div class="bigimgicon" style="left: 79%; top: 67.5%;">
                <div class="bigimgicon_a" onclick="showlayer('xny')">
                    <span class="bigimgicon_dian xny_icon"></span>
                </div>
            </div>

            <!-- 发电厂(储能调频) -->
            <div class="bigimgicon" style="left: 8.5%; top: 77.5%;">
                <div class="bigimgicon_a" onclick="showlayer('fdc')">
                    <span class="bigimgicon_dian fdc_icon"></span>
                </div>
            </div>

            <!-- 柴油、天然气发电机组 -->
            <div class="bigimgicon" style="left: 65%; top: 86%;">
                <div class="bigimgicon_a" onclick="showlayer('cytyq')">
                    <span class="bigimgicon_dian cytyq_icon"></span>
                </div>
            </div>


        </div>
    </div>



<!-- 弹框 -->
    <!-- 基建临时用电(桩机、隧道等) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="jjlsyd">
            <img class="layerimg" src="./images/jjlsyd.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt="" onclick="closelayer('jjlsyd')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('jjlsyd')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_jjlsyd">
            <source src="./audio/jjlsyd.mp3" type="audio/mpeg">
        </audio>

    <!-- 应急保障 -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="yjbz">
            <img class="layerimg" src="./images/yjbz.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('yjbz')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('yjbz')">
        </div>
        <!-- 弹框音频 -->
        <audio controls loop class="audiodiv" id="audio_yjbz">
            <source src="./audio/yjbz.mp3" type="audio/mpeg">
        </audio>

    <!-- 柴储一体化智能微网电站 -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="ndes" style="height: 70%;top: 15%;">
            <img class="layerimg" src="./images/ndes.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt="" onclick="closelayer('ndes')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('ndes')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_ndes">
            <source src="./audio/ndes.mp3" type="audio/mpeg">
        </audio>

    <!-- 民生保障(山区、海岛离网供电) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="msbz">
            <img class="layerimg" src="./images/msbz.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('msbz')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_msbz">
            <source src="./audio/msbz.mp3" type="audio/mpeg">
        </audio>

    <!-- 移动应用(带车底移动电源车) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="ydyy">
            <img class="layerimg" src="./images/ydyy.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('ydyy')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('ydyy')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_ydyy">
            <source src="./audio/ydyy.mp3" type="audio/mpeg">
        </audio>


    <!-- 采矿工业(油田、矿井等) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="ckgy">
            <img class="layerimg" src="./images/ckgy.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('ckgy')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('ckgy')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_ckgy">
            <source src="./audio/ckgy.mp3" type="audio/mpeg">
        </audio>

    <!-- 应急备用(银行、医院、学校等) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" style="right:29%;top:21%;" id="yjby">
            <img class="layerimg" src="./images/yjby.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('yjby')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('yjby')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_yjby">
            <source src="./audio/yjby.mp3" type="audio/mpeg">
        </audio>
    
    <!-- 充电站 -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="cdz">
            <img class="layerimg" src="./images/cdz.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt="" onclick="closelayer('cdz')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_cdz">
            <source src="./audio/cdz.mp3" type="audio/mpeg">
        </audio>

    <!-- 智能储能电站 NESS -->
        <!-- 弹框图片 -->
        <div class="layerdiv" style="height: 90%;top: 5%;" id="ness">
            <img class="layerimg" src="./images/ness.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt="" onclick="closelayer('ness')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('ness')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_ness">
            <source src="./audio/ness.mp3" type="audio/mpeg">
        </audio>

    <!-- 电网(储能调峰，用户侧响应) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" id="dy">
            <img class="layerimg" src="./images/dy.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('dy')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_dy">
            <source src="./audio/dy.mp3" type="audio/mpeg">
        </audio>

    <!-- 新能源(离网、并网调节) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" style="height: 72%;top: 14%;" id="xny">
            <img class="layerimg" src="./images/xny.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('xny')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_xny">
            <source src="./audio/xny.mp3" type="audio/mpeg">
        </audio>

    <!-- 发电厂(储能调频) -->
        <!-- 弹框图片 -->
        <div class="layerdiv" style="height: 68%;top: 16%;" id="fdc">
            <img class="layerimg" src="./images/fdc.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt=""  onclick="closelayer('fdc')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_fdc">
            <source src="./audio/fdc.mp3" type="audio/mpeg">
        </audio>

    <!-- 柴油、天然气发电机组 -->
        <!-- 弹框图片 -->
        <div class="layerdiv" style="height: 66%;top: 17%;" id="cytyq">
            <img class="layerimg" src="./images/cytyq.svg" alt="">
            <img class="layerclose" src="./images/close.svg" alt="" onclick="closelayer('cytyq')">
            <img class="videobtn" src="./images/playvideo.svg" alt="" onclick="showvideo('cytyq')">
        </div>
        <!-- 弹框音频 -->
        <audio controls  loop class="audiodiv" id="audio_cytyq">
            <source src="./audio/cytyq.mp3" type="audio/mpeg">
        </audio>




</div><!-- container结束 -->

<!-- 引入响应式布局的rem根标签 -->
<script>
    (function(win,doc){
        var docEl = doc.documentElement || document.body;//获取HTML标签
        var container = doc.getElementById('container');//container元素
        //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
        // var resize = 'onorientationchange' in win ? 'orientationchange':'resize';
        function rem(){
            docEl.style.fontSize= 100*(container.clientWidth/750)+'px';
        }

        //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
        doc.addEventListener('DOMContentLoaded',rem,false);

        //win下监听resize事件,如果resize事件，那么执行rem函数
        // win.addEventListener(resize,rem,false);
    })(window,document);
</script>
<script type='text/javascript' src='./js/jquery-3.2.1.js'></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jsSHA/1.6.0/sha.js"></script>
<script type='text/javascript' src='./js/index.js'></script>
<script type='text/javascript' src="./js/player/layer.js"></script>
<script>
    
    var APPID = "wx9614e2a5bb3ba2c5";
    var APPSECRET = "063a871aa809b3b2c2a31b3249ec23cf";
    var noncestr = Math.random().toString(36).substr(2, 15);
    var timestamp = parseInt(new Date().getTime() / 1000) + '';
    var pageurl = window.location.href;

    var access_token = "";
    var jsapi_ticket = "";

    $.ajax({
        type: "get",
        url: "http://112.74.169.99:21021/api/TokenAuth/GetWXAccessToken?appid=" + APPID + "&secret=" +APPSECRET,
        success: function (res) {
            if(res.success){
                var result = JSON.parse(res.result);
                access_token = result.access_token;
                window.localStorage.setItem('access_token', ''); //全局缓存access_token
                window.localStorage.setItem('access_token', access_token); //全局缓存access_token

                $.ajax({
                    type: "GET",
                    url: "http://112.74.169.99:21021/api/TokenAuth/Getticket?accesstoken=" + access_token,
                    success: function (resres) {
                        if(resres.success){
                            var resresult = JSON.parse(resres.result);
                            jsapi_ticket = resresult.ticket
                            window.localStorage.setItem('jsapi_ticket', '');//全局缓存jsapi_ticket
                            window.localStorage.setItem('jsapi_ticket', jsapi_ticket);//全局缓存jsapi_ticket
                            var signature = calcSignature(jsapi_ticket, noncestr, timestamp, pageurl)
                            shareParem(APPID, timestamp, noncestr, signature);
                        }
                    },
                    error: function (err) {
                    }
                });
            }

        },
        error: function (err) {}
    });

    function shareParem(APPID, timestamp, noncestr, signature) {
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.indexOf('micromessenger') > 0) {//微信环境
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: APPID, // 必填，公众号的唯一标识
                timestamp: timestamp, // 必填，生成签名的时间戳
                nonceStr: noncestr, // 必填，生成签名的随机串
                signature: signature,// 必填，签名，见附录1
                jsApiList: [
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ]
            })

            wx.ready(function () {
                //分享给朋友
                wx.updateAppMessageShareData({
                    title: "聚能优电电子沙盘",
                    desc: "智能低碳供电解决方案专家",
                    link: "http://m.jnydnyy.com/jnydnyy/index.html",
                    imgUrl: "http://m.jnydnyy.com/jnydnyy/wxlogo.png",
                    // type: 'link', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                })

                //分享到朋友圈
                wx.updateTimelineShareData({
                    title: "聚能优电电子沙盘",
                    link: "http://m.jnydnyy.com/jnydnyy/index.html",
                    imgUrl: "http://m.jnydnyy.com/jnydnyy/wxlogo.png",
                    success: function () {
                        // 用户确认分享后执行的回调函数
                    }
                })

            })

            wx.error(function (res) {
                alert(res.errMsg);//错误提示
            })
        }else{
            alert("非微信浏览器");
        }
    }

    function calcSignature(ticket, noncestr, timestamp, url) {
        var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url;
        shaObj = new jsSHA(str, 'TEXT');
        return shaObj.getHash('SHA-1', 'HEX');
    }


</script>




</body>
</html>
